<!-- 应用量尺 -->
<template>
    <div v-if="rulerVisible" class="app-ruler-box">
        <div class="ruler-top-background"></div>
        <div
            class="ruler-top-line-box"
            title="此区域可拖拽出参考线"
            @mousedown="event => onClickRuler(event, 'top')"
        ></div>
        <div class="ruler-top" :style="rulerTopStyle">
            <div v-for="element in rulerTopNumberList" :key="element" class="ruler-top-contain">
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale"></span>
                <span class="ruler-top-scale">
                    <span class="top-scale-number">{{ element }}</span>
                </span>
            </div>
        </div>
        <div class="ruler-left-background"></div>
        <div
            class="ruler-left-line-box"
            title="此区域可拖拽出参考线"
            @mousedown="event => onClickRuler(event, 'left')"
        ></div>
        <div class="ruler-left" :style="rulerLeftStyle">
            <div v-for="element in rulerLeftNumberList" :key="element" class="ruler-left-contain">
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale"></span>
                <span class="ruler-left-scale">
                    <span class="left-scale-number">{{ element }}</span>
                </span>
            </div>
        </div>
        <div class="reference-line">
            <div
                v-for="(element, index) in referenceLineList"
                :key="index"
                :style="{ 'top': `${element.top}px`, 'left': `${element.left}px` }"
                :class="['ui-draggable', 'ui-draggable-handle', 'item', `${element.type == 'left' ? 'left-line' : 'top-line'}`]"
                @mousedown="event => onDragReferenceLine(event, element)"
            >
                <span
                    :style="element.type == 'top' ? `left:${element.textPosition}px;` : `top:${element.textPosition}px;`"
                >{{ element.type == "top" ? element.top : element.left }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useEditStore } from '@/store'
import { onDeleteRulerLineEvent } from './events'
export default defineComponent({
    name: 'EditMainRuler',
    setup() {
        const editStore = useEditStore()

        // 参考线集合
        const referenceLineList = ref([])
        // 顶部量尺刻度
        const rulerTopNumberList = ref([-400, -300, -200, -100, 0, 100, 200, 300, 400, 500, 600, 700 ,800 ,900 ,1000 ,1100 ,1200 ,1300 ,1400 ,1500 ,1600 ,1700 ,1800 ,1900 ,2000 ,2100 ,2200 ,2300 ,2400 ,2500 ,2600 ,2700 ,2800 ,2900 ,3000 ,3100 ,3200 ,3300 ,3400 ,3500 ,3600 ,3700 ,3800 ,3900 ,4000, 4100, 4200, 4300, 4400, 4500])
        // 左部量尺刻度
        const rulerLeftNumberList = ref([-100, 0, 100, 200, 300, 400, 500, 600, 700 ,800 ,900 ,1000 ,1100 ,1200 ,1300 ,1400 ,1500 ,1600 ,1700 ,1800 ,1900 ,2000 ,2100 ,2200 ,2300 ,2400 ,2500 ,2600 ,2700 ,2800 ,2900 ,3000 ,3100 ,3200 ,3300 ,3400 ,3500 ,3600 ,3700 ,3800 ,3900 ,4000, 4100, 4200, 4300, 4400, 4500, 4600, 4700, 4800])

        const phoneZoom = computed(() => editStore.phoneZoom)
        const rulerVisible = computed(() => editStore.rulerVisible)

        const rulerTopStyle = computed(() => {
            return {
                left: `calc((100% - ${1300 + (phoneZoom.value * 100 - 100) / 5 * 25}px) / 2)`
            }
        })

        const rulerLeftStyle = computed(() => {
            return {
                top: `calc((100% - ${940 + (phoneZoom.value * 100 - 100) / 5 * 25}px) / 2)`
            }
        })

        const onDeleteLine = () => {
            referenceLineList.value = []
        }

        onDeleteRulerLineEvent(() => {
            onDeleteLine()
        })

        const onClickRuler = (event, type) => {
            referenceLineList.value.push({
                left: type === 'top' ? 0 : event.clientX,
                top: type === 'top' ? event.clientY : 0,
                type: type,
                textPosition: 0
            })
            const currentLine = referenceLineList.value[referenceLineList.value.length - 1]
            document.onmousemove = e => {
                e.stopPropagation()
                e.preventDefault()
                document.body.style.cursor = 'move'
                if (type === 'top') {
                    currentLine.top = e.clientY
                    currentLine.textPosition = e.clientX - 35
                } else {
                    currentLine.left = e.clientX
                    currentLine.textPosition = e.clientY - 35
                }
            }
            document.onmouseup = () => {
                document.body.style.cursor = ''
                document.onmousemove = null
                document.onmouseup = null
            }
        }

        // 拖拽预览线
        const onDragReferenceLine = (event, ele) => {
            document.onmousemove = e => {
                e.stopPropagation()
                e.preventDefault()
                document.body.style.cursor = 'move'
                if (ele.type === 'top') {
                    ele.top = e.clientY
                    ele.textPosition = e.clientX - 35
                } else {
                    ele.left = e.clientX
                    ele.textPosition = e.clientY - 35
                }
            }
            document.onmouseup = () => {
                document.body.style.cursor = ''
                document.onmousemove = null
                document.onmouseup = null
            }
        }

        return {
            rulerVisible,
            referenceLineList,
            rulerTopNumberList,
            rulerLeftNumberList,

            rulerTopStyle,
            rulerLeftStyle,

            onClickRuler,
            onDragReferenceLine
        }
    }
})
</script>

<style lang="less" scoped>
.app-ruler-box {
    color: var(--edit-text-color-regular);
    .ruler-top-background {
        position: fixed;
        top: 60px;
        left: 328px;
        width: 100%;
        height: 20px;
        background-color: var(--edit-fill-color-lighter);
        border-bottom: 1px solid var(--edit-border-color);
    }
    .ruler-top-line-box {
        position: fixed;
        top: 60px;
        left: 0px;
        width: 100%;
        height: 20px;
        z-index: 2;
        opacity: 0;
        cursor: pointer;
        .ruler-top-line {
            width: 300%;
            height: 1px;
            background-color: var(--edit-color-primary);
            position: relative;
        }
        .ui-draggable {
        }
        .ui-draggable-handle {
            -ms-touch-action: none;
            touch-action: none;
        }
    }
    .ruler-top {
        position: fixed;
        top: 60px;
        width: 100%;
        white-space: nowrap;
        font-size: 0;
        .ruler-top-contain {
            display: inline-block;
            font-size: 0;
            vertical-align: top;
            .ruler-top-scale {
                margin-right: 9px;
                height: 5px;
                width: 1px;
                display: inline-block;
                background-color: var(--edit-border-color);
                vertical-align: top;
                &:nth-child(10n) {
                    height: 20px;
                    position: relative;
                }
                .top-scale-number {
                    font-size: 12px;
                    position: absolute;
                    top: 6px;
                    left: 4px;
                }
            }
        }
    }
    .ruler-left-background {
        position: fixed;
        top: 60px;
        left: 328px;
        width: 20px;
        height: 100%;
        background-color: var(--edit-fill-color-lighter);
        border-right: 1px solid var(--edit-border-color);
    }
    .ruler-left-line-box {
        position: fixed;
        top: 0px;
        left: 328px;
        width: 20px;
        height: 100%;
        z-index: 2;
        display: flex;
        opacity: 0;
        cursor: pointer;
    }
    .ruler-left {
        position: fixed;
        left: 328px;
        width: 20px;
        font-size: 0;
        .ruler-left-contain {
            .ruler-left-scale {
                width: 5px;
                display: block;
                margin-bottom: 9px;
                height: 1px;
                background-color: var(--edit-border-color);
                &:nth-child(10n) {
                    width: 20px;
                    position: relative;
                }
                .left-scale-number {
                    font-size: 12px;
                    position: absolute;
                    top: 4px;
                    left: 4px;
                    transform: rotate(90deg);
                }
            }
        }
    }
    .reference-line {
        .item {
            position: fixed;
            z-index: 2;
            cursor: move;
            background-color: var(--edit-color-error-dark-2);
            outline: 0px;
            &:hover {
                & > span {
                    font-size: 14px;
                    text-shadow: var(--edit-color-white) 0px 1px 0px;
                }
            }
            & > span {
                position: absolute;
                font-size: 12px;
            }
        }
        .left-line {
            width: 1px;
            height: 100%;
            top: 0px;
            span {
                top: 80px;
                left: 5px;
            }
        }
        .top-line {
            width: 100%;
            height: 1px;
            left: 0px;
            span {
                top: -18px;
                left: 300px;
            }
        }
    }
}
</style>